<div id="slider1_container"
	style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 550px; height: 105px;">

	<!-- Loading Screen -->
	<div u="loading" style="position: absolute; top: 0px; left: 0px;">
		<div
			style="filter: alpha(opacity = 70); opacity: 0.7; position: absolute; display: block; background-color: #000; top: 0px; left: 0px; width: 100%; height: 100%;">
		</div>
	</div>

	<!-- Slides Container -->
	<div u="slides"
		style="cursor: move; position: absolute; left: 0px; top: 0px; width: 550px; height: 105px; overflow: hidden;">
		<c:forEach var="banner" items="${banners}">
			<div>
				<a href="${banner.link}"><img u="image"
					src="<c:url value="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${bannerLocationUrl}${banner.bannerName}" />" /></a>
			</div>
		</c:forEach>
	</div>

	<!-- Bullet Navigator Skin Begin -->
	<style type="text/css">
</style>
	<!-- bullet navigator container -->
	<div u="navigator" class="jssorb05"
		style="position: absolute; bottom: 1px; right: 6px;">
		<!-- bullet navigator item prototype -->
		<div u="prototype"
			style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
	</div>
	<!-- Bullet Navigator Skin End -->
	<!-- Arrow Navigator Skin Begin -->
	<!-- Arrow Left -->
	<span u="arrowleft" class="jssora12l"
		style="width: 30px; height: 46px; top: 33px; left: 0px;"> </span>
	<!-- Arrow Right -->
	<span u="arrowright" class="jssora12r"
		style="width: 30px; height: 46px; top: 33px; right: 0px"> </span>
	<!-- Arrow Navigator Skin End -->
</div>